import { StylesDemos } from '@docs/demos';
import { ButtonStylesApi } from '@docs/styles-api';
import { ModifiersTable } from '@/components/StylesApiTable';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.DataAttributes);

# data attributes

Mantine components use `data-*` attributes to apply styles. These attributes are used as
a modifier to apply styles based on component state. General rule of Mantine components
styles: one class with shared styles and any number of `data-*` attributes as modifiers.

Example of applying styles with `data-*` attributes:

<Demo data={StylesDemos.dataAttributes} />

## data attributes values

Most of the `data-*` attributes do not have associated values, they represent boolean
state or a feature. For example, when the `disabled` prop on [Button](/core/button) is set,
the `data-disabled` attribute is added to the `<button />` element:

```tsx
import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button disabled className="my-button">
      Disabled button
    </Button>
  );
}
```

Will output the following HTML:

```html
<button class="my-button" data-disabled>Disabled button</button>
```

You can then use this attribute to apply styles to the disabled button:

```css
.my-button {
  color: var(--mantine-color-black);

  &[data-disabled] {
    color: var(--mantine-color-gray-5);
  }
}
```

When the `disabled` prop is not set, then the `data-disabled` attribute is not added to the
button:

```html
<button class="my-button">Not disabled button</button>
```

In some cases, `data-*` attributes have associated values, for example, a [Button](/core/button)
component's `section` element has an associated `data-position` attribute which can be
`left` or `right`. The following example will render two `section` elements, one with
`data-position="left"` and another with `data-position="right"`:

```tsx
import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button leftSection="L" rightSection="R">
      Label
    </Button>
  );
}
```

Will output the following HTML:

```html
<button>
  <span class="section" data-position="left">L</span>
  Label
  <span class="section" data-position="right">R</span>
</button>
```

You can then use this attribute to apply styles to the left and right sections:

```css
.section {
  /* Styles applied to both sections */
  width: 2rem;

  /* Styles applied only to left section */
  &[data-position='left'] {
    background-color: red;
  }

  /* Styles applied only to right section */
  &[data-position='right'] {
    background-color: blue;
  }
}
```

## Components data attributes documentation

Every component that uses `data-*` attributes has a dedicated section under the `Styles API` tab.

[Button](/core/button) component `data-*` attributes table:

<ModifiersTable
  data={ButtonStylesApi}
  withTableBorder={false}
  my="xl"
  fixedLayout={false}
/>

How to read the table:

- `selector` column – [Styles API](/styles/styles-api) selector (or multiple selectors) to which data attribute is added
- `attribute` column – data attribute name
- `condition` column – condition based on which the data attribute is added to the element
- `value` column – value of the data attribute

## mod prop

All components support `mod` prop, which allows adding data attributes to
the root element:

```tsx
import { Box } from '@mantine/core';

<Box mod="data-button" />;
// -> <div data-button />

<Box mod={{ opened: true }} />;
// -> <div data-opened />

<Box mod={{ opened: false }} />;
// -> <div />

<Box mod={['button', { opened: true }]} />;
// -> <div data-button data-opened />

<Box mod={{ orientation: 'horizontal' }} />;
// -> <div data-orientation="horizontal" />
```
